// @flow
import React, { Component } from 'react';
import OutsideClickHandler from 'react-outside-click-handler';
import UserMenuItem from 'components/Header/UserMenuItem';
import './UserMenuList.scss';

type Props = {
    onClick(): void,
    onLogout(): Promise<*>,
    menuListOutClickHandle(): void,
    username: string
};

const UserMenuList = ({ onClick, onLogout, username, menuListOutClickHandle }: Props) => {
    return (
        <OutsideClickHandler onOutsideClick={() => menuListOutClickHandle()}>
            <div className="user-menu-list-wrapper">
                <div className="user-menu-list-positioner">
                    <div className="user-menu" onClick={onClick}>
                        <div className="me">
                            <div className="username">@{username}</div>
                        </div>
                        <div className="menu-items">
                            <UserMenuItem to="/things">Things</UserMenuItem>
                            <UserMenuItem>预测</UserMenuItem>
                            <div className="separator" />
                            <UserMenuItem to="/setting">设置</UserMenuItem>
                            <UserMenuItem onClick={onLogout}>退出</UserMenuItem>
                        </div>
                    </div>
                </div>
            </div>
        </OutsideClickHandler>
    );
};
export default UserMenuList;
